import React from 'react';
import { Row, Col, Form, Select, Modal, InputNumber, Input, Button } from 'antd';
import { connect } from 'dva';
const R = require('ramda');
import BizParams from '../../../components/commons/BizParams';
import CurrencySelect from '../../../components/commons/CurrencySelect'
import OperatorConstant from "../../../utils/OperatorConstant";

const FormItem = Form.Item;
export default connect(({ logisticsSupplier, customerManage }) => ({ logisticsSupplier, customerManage }))((
    Form.create({ wrappedComponentRef: true })(class CostDetail extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                open: false,
                type: "1", //1.查看费用 2.新增费用 3.申报费用
                dataSource: {},
                order: {},
                searchConditions: {},
                funType: ""
            }
        }

        handleOpen = (dataSource, type, order, searchConditions, funType) => {
            searchConditions.orderId = searchConditions.id;
            this.setState({
                dataSource: dataSource,
                open: true,
                type: type,
                order: order,
                searchConditions: searchConditions,
                funType
            });
        }

        handleClose = () => {
            this.setState({ open: false });
            this.props.form.resetFields();
        }

        handleSaveCost = (status) => {
            this.props.form.validateFields((errors, values) => {
                if (errors) {
                    return;
                }

                values.id = this.state.dataSource.id;
                values.orderid = this.state.searchConditions.id;
                values.status = status;

                let fun = this.state.funType === OperatorConstant.edit ? 'orderCost/updateOrderCost' : 'orderCost/addOrderCost'
                this.props.dispatch({
                    type: fun,
                    payload: {
                        ...values,
                        searchConditions: this.state.searchConditions
                    },

                })
                this.handleClose();
            })
        }


        getProvider = (e) => {
            this.props.form.setFieldsValue({ providerId: '' });
            let values = this.props.form.getFieldsValue();
            let type = R.isNil(e) ? values.providerType : e;
            if (type === '0') {
                this.props.dispatch({ type: 'customerManage/queryCustomerManageList', payload: { status: 4 } });//查询工厂供应商列表
            } else {
                this.props.dispatch({ type: 'logisticsSupplier/getSupplierList' });
            }
        };


        render() {
            let titles = { "1": "查看费用", "2": "添加费用", "3": "申报费用" };
            let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
            let { getFieldDecorator } = this.props.form;

            let footer = [
                <Button key="save" size="large" onClick={this.handleSaveCost.bind(this, "1")}
                    style={{ display: this.state.type === "2" ? "inline-block" : "none" }}>保存</Button>,
                <Button key="apply" size="large" onClick={this.handleSaveCost.bind(this, "3")}
                    style={{ display: this.state.type === "2" ? "inline-block" : "none" }}>保存并提交</Button>,
                <Button key="cancel" size="large" onClick={this.handleClose.bind(this)}
                    style={{ display: this.state.type !== "1" ? "inline-block" : "none" }}>取消</Button>
            ]

            let suppilerList = [];
            let gcsuppilerList = R.isNil(this.props.customerManage.suppilerList) ? [] : this.props.customerManage.suppilerList;
            let wlsuppilerList = R.isNil(this.props.logisticsSupplier.supplierList) ? [] : this.props.logisticsSupplier.supplierList;
            let hgList = this.props.customs.list ? this.props.customs.list : [];
            suppilerList = this.props.form.getFieldValue('providerType') === '2' ? hgList : wlsuppilerList;

            return (
                <Modal maskClosable={false} footer={footer} visible={this.state.open} title={titles[this.state.type]}
                    width={760} wrapClassName="vertical-center-modal" onCancel={this.handleClose.bind(this)}>
                    <Form>
                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="订单编号" hasFeedback>
                                    {R.isNil(this.state.order.orderno) ? "" : this.state.order.orderno}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="费用类型" hasFeedback>
                                    {getFieldDecorator('providerType', {
                                        rules: [{
                                            required: true, message: '请选择费用类型'
                                        }],
                                        initialValue: this.state.dataSource.providerType
                                    })(
                                        <Select disabled={this.state.type !== "2"} allowClear
                                            onChange={value => this.getProvider(value)}>
                                            <Select.Option value="1">物流</Select.Option>
                                            <Select.Option value="2">关税</Select.Option>
                                        </Select>
                                        )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="费用科目" hasFeedback>
                                    {getFieldDecorator('chargetype', {
                                        rules: [{
                                            required: true, message: '请选择费用科目'
                                        }],
                                        initialValue: this.state.dataSource.chargeType
                                    })(
                                        <BizParams sprCode='chargeType' disabled={this.state.type !== "2"} />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="币种" hasFeedback>
                                    {getFieldDecorator('currency', {
                                        rules: [{
                                            required: true, message: '请选择币种'
                                        }],
                                        initialValue: "CNY"
                                    })(
                                        <CurrencySelect disabled={true} />
                                        )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="应收客户金额" hasFeedback>
                                    {getFieldDecorator('cost', {
                                        rules: [{
                                            required: true, message: '请输入应收客户金额'
                                        }],
                                        initialValue: this.state.dataSource.cost
                                    })(
                                        <InputNumber disabled={this.state.type !== "2"} style={{ width: '100%' }}
                                            max={99999999999999} precision={2} />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="成本来源" hasFeedback>
                                    {getFieldDecorator('providerId', {
                                        rules: [{
                                            required: true, message: '请选择成本来源'
                                        }],
                                        initialValue: this.state.dataSource.providerId
                                    })(
                                        <Select style={{ width: '100%' }} disabled={this.state.type !== "2"} showSearch
                                            placeholder="可通过输入关键字搜索"
                                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                                            {
                                                !R.isNil(suppilerList) ? suppilerList.map(item => {
                                                    return (<Select.Option value={item.id} key={item.id}>{item.companyname}</Select.Option>);
                                                }) : ''
                                            }
                                        </Select>
                                        )}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="成本价" hasFeedback>
                                    {getFieldDecorator('basicCost', {
                                        rules: [{
                                            required: true, message: '请输入成本价'
                                        }],
                                        initialValue: this.state.dataSource.basicCost
                                    })(
                                        <InputNumber disabled={this.state.type !== "2"} style={{ width: '100%' }}
                                            max={99999999999999} precision={2} />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={12}>
                                <FormItem {...formItemLayout} label="备注" hasFeedback>
                                    {getFieldDecorator('memo', {
                                        initialValue: this.state.dataSource.memo
                                    })(
                                        <Input.TextArea disabled={this.state.type !== "2"} maxLength="100"
                                            autosize={true} />
                                        )}
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
            )
        }
    })
))